<template>
  <div class="header-container">
    <div class="left">
      <slot>
        <span>设备编号：</span>
      </slot>
    </div>
    <div class="middle">
      <el-input v-model="searchText" clearable placeholder="请输入" style="width: 210px; margin-right: 10px;" @clear="handleClear" />
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      // 处理查询逻辑
      this.$emit('handleSearch', this.searchText)
    },
    handleClear() {
      this.searchText = ''
    }
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  height: 64px;
  background-color: #fff;
  padding: 0 20px;
  margin-bottom: 20px;
}

.left {
  flex-grow: 0;
  font-size: 14px;
  color: #606266;
}

.middle {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
</style>
